<template>
  <a-modal
    v-model:visible="visible"
    width="80%"
    :body-style="{ height: '600px', overflow: 'hidden', overflowY: 'scroll' }"
    draggable
    :footer="false"
  >
    <template #title> 错误详情 </template>
    <a-table
      row-key="id"
      :columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="false"
    >
      <template #content="{ record }">
        <a-popover position="right">
          <div class="text-overflow-1">{{ record.title || '--' }}</div>
          <template #content>
            <div class="flex-col max-800">
              <div>{{ record.title }}</div>
              <div class="flex flex-wrap mt-m" v-if="record?.momentGood?.picture">
                <div class="mr-10" v-for="(item, index) in record.momentGood.picture" :key="index">
                  <ImgHoverPreview :width="120" :height="120" :url="item" />
                </div>
              </div>
              <div class="text666 text-size-12 mt-10">{{ record.sendAt }}</div>
              <div class="mt-m" v-if="record?.momentGood?.comment">
                <div
                  class="bgf7 round-2 p-6 mb-m text-size-12"
                  v-for="(item, index) in record.momentGood.comment"
                  :key="index"
                >
                  评论 {{ index + 1 }}：{{ item }}
                </div>
              </div>
            </div>
          </template>
        </a-popover>
      </template>
    </a-table>
  </a-modal>
</template>

<script setup>
const visible = ref(false)

const columns = ref([])
const tableData = ref([])

const getData = (res, cloumn) => {
  columns.value = cloumn
  tableData.vulue = res.data.list
  visible.value = true
}

defineExpose({ getData })
</script>
